import { useEffect, useState } from 'react';
import { isArray, DownLoadOutlined, Cell } from 'esy-ui';
import { postMain } from '@/services';
import { useGlobalStore } from '@/mobx';
import { Img } from '@/components';

const defList = [
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 1,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 2,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 3,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 4,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 5,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 6,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
  {
    text: '这是一段描述',
    url: 'https://www.baidu.com',
    id: 7,
    src: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    title: '这是标题',
  },
];

function SubMain() {
  const [list, setList] = useState(defList);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    postMain()
      .then((res?: any) => {
        if (isArray(res?.data)) {
          setList(res?.data);
        }
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return (
    <div className='grid grid-cols-1 gap-3'>
      {list.map((it) => (
        <Cell key={it.id} title='' className='justify-between cursor-pointer'>
          <div className='flex'>
            <Img src={it.src} boxClassName='rounded-xl overflow-hidden w-16 h-16' />
            <div className='mx-2 flex-1'>
              <div className='text-sm text-left mt-1'>{it.title}</div>
              <div className='text-xs text-slate-400 mt-1'>{it.text}</div>
            </div>
          </div>
          <div className='rounded-full px-1 text-text-2 border-text-2 border flex items-center justify-center h-6 text-xs'>
            <DownLoadOutlined className='text-text-2 mr-1' />
            下载
          </div>
        </Cell>
      ))}
    </div>
  );
}

export default SubMain;
